<template>
  <el-dialog title="预览" width="620px" :visible.sync="show" @close="close" append-to-body :close-on-click-modal="false">
    <el-image v-if="obj.type === 'poster'" :src="obj.coverUrl"></el-image>
    <div v-if="obj.type === 'article'">
      <div v-if="article.id">
        <p class="title">{{ article.materialName }}</p>
        <p class="author">
          <span style="color: #082aff;">
            {{ article.author }}
          </span>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          {{ dateFormat(article.createTime) }}
        </p>
        <div class="content" v-html="article.content"></div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { articleInfo } from '@/api/article/group'
import { dateFormat } from '@/utils'

export default {
  props: {
    content: {
      default: {},
      type: Object,
      validator: value => {
        if (Object.keys(value).length === 0) {
          return true
        }
        return ['poster', 'article'].indexOf(value.type) !== -1
      }
    }
  },
  data() {
    return {
      obj: {},
      article: {},
      show: false,
    }
  },
  watch: {
    content: {
      handler(newValue, oldValue) {
        this.obj = newValue
        if (Object.keys(newValue).length === 0) {
          this.show = false
        } else {
          if (newValue.type === 'article') {
            this.info(newValue.id)
          }
          this.show = true
        }
      },
      deep: true
    }
  },
  methods: {
    close() {
      this.obj = {}
      this.show = false
    },
    info(id) {
      articleInfo(id).then(res => {
        if (res.code === 200) {
          const { data } = res
          this.article = data
        }
      })
    },
    dateFormat
  }
}
</script>

<style lang="scss" scoped>
.title {
  line-height: 1.4;
  padding: 20px 20px 15px 20px;
  font-size: 18px;
}

.author {
  line-height: 2;
  font-size: 14px;
  color: #999;
  padding: 0 20px 15px 20px;
}


.content {
  padding: 0 15px 15px 15px;
  height: 425px;
  overflow-y: auto;
}
</style>
